<template>
	<div class="container">
		<div class="userinfo">
			<div class="avatar">
				<img v-if="userinfo.sex==1" :src="userinfo.head_img?userinfo.head_img:nantou" alt="">
				<img v-if="userinfo.sex==0" :src="userinfo.head_img?userinfo.head_img:nvtou" alt="">
			</div>
			<div class="user_content">
				<span class="username">{{ userinfo.name }}</span>
				<div class="gender">
					<i class="iconfont icon-nan" v-if="userinfo.sex == 1" style="color: #2CCFC7;"></i>
					<i class="iconfont icon-nv" v-if="userinfo.sex == 0" style="color: #EC748B;"></i>
				</div>
				<br />
				<span class="age">{{ userinfo.birthday }}岁&emsp;</span>
				<span class="phone">{{ userinfo.phone }}</span>
			</div>
			<div class="symptom">
				<div class="main">
					主述症状
					<br />
					<p v-if="!niledinut[0].niledinut">暂无症状描述</p>
					<p v-if="niledinut[0].niledinut">{{ niledinut[0].niledinut }}</p>
				</div>
				<div class="discribe" v-if="show">
					问题描述
					<br />
					<p>{{ niledinut[0].description }}</p>
					<span class="open" @click="open" v-if="showbtn">展开</span>
				</div>
				<div class="discribe-on" v-if="!show">
					问题描述
					<p v-if="!niledinut[0].description">暂无问题描述</p>
					<p v-if="niledinut[0].description">{{ niledinut[0].description }}</p>
					<span class="open" @click="open">收起</span>
				</div>
			</div>
		</div>
		<div class="clear"></div>
		<!-- 空状态 -->
		<van-empty v-if="result.solution.length==0" description="康复档案还未生成">
			<van-button color="linear-gradient(to right,#1FC9D2,#0383C4)" @click="getFile" round>前往评估获取康复档案</van-button>
		</van-empty>
		<!-- 选项卡 -->
		<div class="tabs" v-if="result.solution.length!=0">
			<van-tabs v-model="active">
				<van-tab title="腰背部">
					<!-- 时间线 -->
					<div :class="index==result.solution.length-1?'lastcard':'card'" v-for="(item, index) in result.solution" :key="index">
						<div :class="index == result.solution.length - 1 ? 'lastcircle' : 'circle'"></div>
						<div class="card-item">
							<div class="card-title" :text="item.title">评估结果</div>
							<div class="time"><p>{{result.create_time.split('/')[0]}}</p><span>{{result.create_time.split('/')[1]}}</span></div>
							<div class="content-box">
								<div class="show" v-if="index!==clickID" >
										<p v-html="item.solution"></p>
										<!-- <p>{{item.solution}}</p> -->
								</div>
								<div class="showbtn" v-if="index!==clickID" @click="showAndHide(index)">展开</div>
								<div class="hide" v-if="index==clickID">
										<p v-html="item.solution"></p>
										<!-- <div class="btn-box" v-if="index==item.length-1"> -->
											<div class="hidebtn" @click="showAndHide(index)">收起</div>
											<div class="btn" @click="goReportList">解决方案</div>
										<!-- </div> -->
								</div>
							</div>
						</div>
					</div>
				</van-tab>
				<van-tab title="肩关节" disabled>
					<div :class="index==result.length-1?'lastcard':'card'" v-for="(item, index) in result.solution" :key="index">
						<div :class="index == result.length - 1 ? 'lastcircle' : 'circle'"></div>
						<div class="card-item">
							<div class="card-title" :text="item.title">评估结果</div>
							<div class="time"><p>{{result.create_time.split('/')[0]}}</p><span>{{result.create_time.split('/')[1]}}</span></div>
							<div class="content-box">
								<div class="show" v-if="index!==clickID" >
										<p v-html="item.solution"></p>
										<!-- <p>{{item.solution}}</p> -->
								</div>
								<div class="showbtn" v-if="index!==clickID" @click="showAndHide(index)">展开</div>
								<div class="hide" v-if="index==clickID">
										<p v-html="item.solution"></p>
										<!-- <div class="btn-box" v-if="index==item.length-1"> -->
											<div class="hidebtn" @click="showAndHide(index)">收起</div>
											<div class="btn" @click="goReportList">解决方案</div>
										<!-- </div> -->
								</div>
							</div>
						</div>
					</div>
				</van-tab>
				<van-tab title="颈椎部" disabled>
					<div :class="index==result.length-1?'lastcard':'card'" v-for="(item, index) in result.solution" :key="index">
						<div :class="index == result.length - 1 ? 'lastcircle' : 'circle'"></div>
						<div class="card-item">
							<div class="card-title" :text="item.title">评估结果</div>
							<div class="time"><p>{{result.create_time.split('/')[0]}}</p><span>{{result.create_time.split('/')[1]}}</span></div>
							<div class="content-box">
								<div class="show" v-if="index!==clickID" >
										<p v-html="item.solution"></p>
										<!-- <p>{{item.solution}}</p> -->
								</div>
								<div class="showbtn" v-if="index!==clickID" @click="showAndHide(index)">展开</div>
								<div class="hide" v-if="index==clickID">
										<p v-html="item.solution"></p>
										<!-- <div class="btn-box" v-if="index==item.length-1"> -->
											<div class="hidebtn" @click="showAndHide(index)">收起</div>
											<div class="btn" @click="goReportList">解决方案</div>
										<!-- </div> -->
								</div>
							</div>
						</div>
					</div>
				</van-tab>
				<van-tab title="髋关节" disabled>
					<div :class="index==result.length-1?'lastcard':'card'" v-for="(item, index) in result.solution" :key="index">
						<div :class="index == result.length - 1 ? 'lastcircle' : 'circle'"></div>
						<div class="card-item">
							<div class="card-title" :text="item.title">评估结果</div>
							<div class="time"><p>{{result.create_time.split('/')[0]}}</p><span>{{result.create_time.split('/')[1]}}</span></div>
							<div class="content-box">
								<div class="show" v-if="index!==clickID" >
										<p v-html="item.solution"></p>
										<!-- <p>{{item.solution}}</p> -->
								</div>
								<div class="showbtn" v-if="index!==clickID" @click="showAndHide(index)">展开</div>
								<div class="hide" v-if="index==clickID">
										<p v-html="item.solution"></p>
										<!-- <div class="btn-box" v-if="index==item.length-1"> -->
											<div class="hidebtn" @click="showAndHide(index)">收起</div>
											<div class="btn" @click="goReportList">解决方案</div>
										<!-- </div> -->
								</div>
							</div>
						</div>
					</div>
				</van-tab>
				<van-tab title="膝关节" disabled>
					<div :class="index==result.length-1?'lastcard':'card'" v-for="(item, index) in result.solution" :key="index">
						<div :class="index == result.length - 1 ? 'lastcircle' : 'circle'"></div>
						<div class="card-item">
							<div class="card-title" :text="item.title">评估结果</div>
							<div class="time"><p>{{result.create_time.split('/')[0]}}</p><span>{{result.create_time.split('/')[1]}}</span></div>
							<div class="content-box">
								<div class="show" v-if="index!==clickID" >
										<p v-html="item.solution"></p>
										<!-- <p>{{item.solution}}</p> -->
								</div>
								<div class="showbtn" v-if="index!==clickID" @click="showAndHide(index)">展开</div>
								<div class="hide" v-if="index==clickID">
										<p v-html="item.solution"></p>
										<!-- <div class="btn-box" v-if="index==item.length-1"> -->
											<div class="hidebtn" @click="showAndHide(index)">收起</div>
											<div class="btn" @click="goReportList">解决方案</div>
										<!-- </div> -->
								</div>
							</div>
						</div>
					</div>
				</van-tab>
			</van-tabs>
		</div>
	</div>
</template>

<script>
import { Toast,Notify } from 'vant';
export default {
	data() {
		return {
			show: true,
			noDetail: true,
			active: 0,
			clickID:0,
			showbtn:false,
			isempty:false,
			nantou:'http://qnkf.laigl.com/mobilepng/nantou.png',
			nvtou:'http://qnkf.laigl.com/mobilepng/nvtou.png',
			userinfo: [],//个人信息
			result: [],//解决方案
			niledinut:[],//描述
		};
	},
	methods: {
		// 控制文本显示隐藏
		open() {
			this.show = !this.show;
		},
		checkReg(index){
			if(this.clickID==index){
				this.clickID=-100
				return
			}
			this.clickID=index
		},
		// 前往获取档案
		getFile(){
			this.$router.push('/assessment?user_id='+this.$route.query.niledinut_id)
		},
		// 控制文字展开和收起
		showAndHide(index){
			console.log(index)
			// this.showresult= !this.showresult;
			switch (index){
				case 0 :
					this.checkReg(index)
					break;
				case 1 :
					this.checkReg(index)
					break;
				case 2 :
					this.checkReg(index)
					break;
				case 3 :
					this.checkReg(index)
					break
				case 4 :
					this.checkReg(index)
					break
				case 5 :
					this.checkReg(index)
					break
				case 6 :
					this.checkReg(index)
					break
				case 7 :
					this.checkReg(index)
					break
				case 8 :
					this.checkReg(index)
					break
				case 9 :
					this.checkReg(index)
					break;
					default: console.log('出错了',index)
			}
		},
		// 重新评估
		restart() {
			this.$router.push('./solution');
		},
		//查看解决方案
		getSolution() {
			this.$router.push('./solutionChart');
		},
		//查看列表
		goReportList(){
			this.$router.push('./solutionChart');
		},
		// 获取解决方案
		getRecovery(niledinut_id){
			let openid = localStorage.getItem('openid')
			this.$axios.post('rehabilitation/index',{openid,niledinut_id})
			.then(res => {
				console.log(res)
				if (res.data.code==2000) {
					this.result = res.data.data.solution_arr
					this.userinfo = res.data.data.user_info
					this.niledinut = res.data.data.niledinut
					if(this.niledinut[0].description.length>17){
						this.showbtn = true
					}else{
						this.showbtn = false
					}
				} else{
					Notify({type:'danger',message:res.data.msg||'wrong'})
				}
				console.log(this.result)
			});
		}
	},
	created() {
		this.getRecovery(this.$route.query.niledinut_id)
		this.showresult=false
	}
};
</script>

<style scoped lang="less">
.container {
	padding: 1rem 2rem 0 2rem;
	.clear {
		clear: both;
	}
	.userinfo {
		.avatar {
			float: left;
			width: 5rem;
			height: 5rem;
			overflow: hidden;
			border-radius: 4rem;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.user_content {
			float: left;
			width: 70%;
			height: 3rem;
			padding: 1rem 0.5rem;
			.username,
			.gender {
				display: inline-block;
			}
			.username {
				font-size: 1.1rem;
				font-weight: 700;
				margin-right: 0.5rem;
			}
			.gender {
				font-weight: 700;
				i {
					font-size: 1.3rem;
				}
			}
			.age,
			.phone {
				color: #ddd;
			}
		}
		.symptom {
			float: left;
			margin-top: 0.5rem;
			width: 85vw;
			box-sizing: border-box;
			padding: 1rem;
			border-radius: 0.4rem;
			background-color: #f2f3f5;
			.main,
			.discribe,
			.discribe-on {
				font-size: 1.1rem;
				p {
					font-size: 1rem;
					width: 72vw;
					font-weight: 500;
					letter-spacing: 0.1rem;
					color: #c7cad8;
					margin: 0.3rem 0;
				}
				.open {
					font-size: 1rem;
					display: inline-block;
					position: absolute;
					right: -0.5rem;
					bottom: 0;
				}
			}
			.discribe {
				position: relative;
				p {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box; //作为弹性伸缩盒子模型显示。
					-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
					-webkit-line-clamp: 1; //显示的行
				}
				.open {
					font-size: 1rem;
					display: inline-block;
					position: absolute;
					right: -0.5rem;
					bottom: 0;
				}
			}
			.discribe-on {
				position: relative;
			}
		}
	}
	.tabs {
		margin-top: 1rem;
		width: 85vw;
		// 时间线
		.card:nth-of-type(1){
			margin-top: 3rem;
		}
		/deep/ .van-tabs__line{
			background: linear-gradient(to left,#1FC9D2,#0383C4);
			height: .3rem;
		}
		/deep/ .van-tab--active{
			font-weight: 700;
			font-size: 1.1rem;
			color: #21ACCE;
		}
		.lastcard{
			border-left: none!important;
			margin-bottom: 2rem!important;
			padding-bottom: 0!important;
		}
		.card,.lastcard {
			position: relative;
			box-sizing: border-box;
			margin-left: 7rem;
			min-height: 5rem;
			margin-bottom: 2rem;
			padding-left: 1.5rem;
			padding-bottom: 1.5rem;
			border: 1px solid #fff;
			border-left: .1rem solid #000;
			.time{
				position: absolute;
				left: -7rem;
				top: -1.5rem;
				p{
					font-size: 1.1rem;
					font-weight: 600;
				}
				span{
					color: #ccc;
					float: right;
				}
			}
			.card-item{
				border-radius: .5rem;
				box-sizing: border-box;
				padding: .5rem .5rem .8rem 1rem;
				margin-top: -2rem;
				width: 54vw;
				background:linear-gradient(to right,#F0F1F5,#F7F7F9) ;
				.card-title{
					font-size: 1.1rem;
					font-weight: 600;
					margin-bottom: .5rem;
				}
				.content-box{
					.showbtn{
						color: #000;
						text-align: right;
					}
				}
				.show{
					color: #ccc;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				
				.hide{
					color: #ccc;
					position: relative;
					.btn{
						width: 7rem;
						height: 2rem;
						margin-left: 2rem;
						background: linear-gradient(to left,#1FC9D2,#0383C4);
						font-size: 1.1rem;
						color: #fff;
						text-align: center;
						line-height: 2rem;
						border-radius: 1rem;
						margin-top: .5rem;
					}
					.hidebtn{
						color: #000;
						position: absolute;
						right: 0;
						bottom: 0;
					}
				}
			}
			.circle {
				width: 0.8rem;
				height: 0.8rem;
				background: #000;
				border-radius: 1rem;
				position: absolute;
				left: -0.5rem;
				top: -1.5rem;
				z-index: 9;
			}
			.lastcircle {
				width: 0.8rem;
				height: 0.8rem;
				background: #000;
				border-radius: 1rem;
				position: absolute;
				left: -0.5rem;
				top: -1.5rem;
				z-index: 9;
			}
		}
	}
}
</style>
